import { trigger, transition, style, animate } from '@angular/animations';
import { Component, OnInit, Input } from '@angular/core';

const time = '300ms'

const fadeInOut = [trigger('fadeInOut', [transition(':leave', [
    style({ opacity: 1 }),
    animate(time + ' cubic-bezier(0.68, -0.55, 0.27, 1.55)', style({ opacity: 0 }))
]), transition(':enter', [
    style({ opacity: 0 }),
    animate(time + ' cubic-bezier(0.68, -0.55, 0.27, 1.55)', style({ opacity: 1 })),
])])]

@Component({
    selector: 'cmb-lazy-img',
    templateUrl: './lazy-img.component.html',
    styleUrls: ['./lazy-img.component.scss'],
    animations: [fadeInOut]
})
export class LazyImgComponent implements OnInit {

    private _src;
    @Input() set src(src: string) {
        const img = document.createElement('img');
        img.src = src;
        img.onload = () => {
            this._src = src;
        }
    }

    get src() {
        return this._src;
    }

    constructor() { }

    ngOnInit() {
    }

}
